<html>
<head>
<meta charset="utf-8">
<title>Blocky Playground</title>
<script type="text/javascript" src="../blockly.js"></script>
<script type="text/javascript" src="../block.js"></script>
<script type="text/javascript" src="../block_svg.js"></script>
<script type="text/javascript" src="../comment.js"></script>
<script type="text/javascript" src="../connection.js"></script>
<script type="text/javascript" src="../contextmenu.js"></script>
<script type="text/javascript" src="../field.js"></script>
<script type="text/javascript" src="../field_dropdown.js"></script>
<script type="text/javascript" src="../field_label.js"></script>
<script type="text/javascript" src="../field_textinput.js"></script>
<script type="text/javascript" src="../flyout.js"></script>
<script type="text/javascript" src="../generator.js"></script>
<script type="text/javascript" src="../inject.js"></script>
<script type="text/javascript" src="../generators/dart.js"></script>
<script type="text/javascript" src="../generators/dart/control.js"></script>
<script type="text/javascript" src="../generators/dart/text.js"></script>
<script type="text/javascript" src="../generators/dart/math.js"></script>
<script type="text/javascript" src="../generators/dart/logic.js"></script>
<script type="text/javascript" src="../generators/dart/lists.js"></script>
<script type="text/javascript" src="../generators/dart/variables.js"></script>
<script type="text/javascript" src="../generators/dart/procedures.js"></script>
<script type="text/javascript" src="../generators/javascript.js"></script>
<script type="text/javascript" src="../generators/javascript/control.js"></script>
<script type="text/javascript" src="../generators/javascript/text.js"></script>
<script type="text/javascript" src="../generators/javascript/math.js"></script>
<script type="text/javascript" src="../generators/javascript/logic.js"></script>
<script type="text/javascript" src="../generators/javascript/lists.js"></script>
<script type="text/javascript" src="../generators/javascript/variables.js"></script>
<script type="text/javascript" src="../generators/javascript/procedures.js"></script>
<script type="text/javascript" src="../generators/python.js"></script>
<script type="text/javascript" src="../generators/python/control.js"></script>
<script type="text/javascript" src="../generators/python/text.js"></script>
<script type="text/javascript" src="../generators/python/math.js"></script>
<script type="text/javascript" src="../generators/python/logic.js"></script>
<script type="text/javascript" src="../generators/python/lists.js"></script>
<script type="text/javascript" src="../generators/python/variables.js"></script>
<script type="text/javascript" src="../generators/python/procedures.js"></script>
<script type="text/javascript" src="../language/en/_messages.js"></script>
<script type="text/javascript" src="../language/en/control.js"></script>
<script type="text/javascript" src="../language/en/text.js"></script>
<script type="text/javascript" src="../language/en/math.js"></script>
<script type="text/javascript" src="../language/en/logic.js"></script>
<script type="text/javascript" src="../language/en/lists.js"></script>
<script type="text/javascript" src="../language/en/variables.js"></script>
<script type="text/javascript" src="../language/en/procedures.js"></script>
<script type="text/javascript" src="../mutator.js"></script>
<script type="text/javascript" src="../names.js"></script>
<script type="text/javascript" src="../procedures.js"></script>
<script type="text/javascript" src="../scrollbar.js"></script>
<script type="text/javascript" src="../toolbox.js"></script>
<script type="text/javascript" src="../tooltip.js"></script>
<script type="text/javascript" src="../trashcan.js"></script>
<script type="text/javascript" src="../variables.js"></script>
<script type="text/javascript" src="../workspace.js"></script>
<script type="text/javascript" src="../xml.js"></script>
<script type="text/javascript">
// Depending on the URL argument, render as LTR or RTL.
var rtl = (document.location.search == '?rtl');
var block = null;

function start() {
  Blockly.inject(document.getElementById('svg'), {'rtl': rtl, path: '../'});
}

function createCustomBlock() {
  block = new Blockly.Block(Blockly.mainWorkspace, '');
  block.initSvg();
  block.getSvgRoot().setAttribute('transform', 'translate(60, 40)');
  block.render();
  document.getElementById('blockFactoryForm').reset();
  document.getElementById('customTbody').style.display = 'table-row-group';
}

function setColour() {
  block.setColour(document.getElementById('colour').value);
}

function appendTitle() {
  var type = document.getElementById('titleType').value;
  var title = document.getElementById('titleLabel').value;
  if (type == 'textInput') {
    title = new Blockly.FieldTextInput(title);
  }
  block.appendTitle(title);
}

function setTooltip() {
  block.setTooltip(document.getElementById('tooltip').value);
}

function setPreviousStatement() {
  try {
    block.setPreviousStatement(
        document.getElementById('previousStatement').checked);
  } finally {
    document.getElementById('previousStatement').checked =
        !!block.previousConnection;
  }
}

function setNextStatement() {
  try {
    block.setNextStatement(document.getElementById('nextStatement').checked);
  } finally {
    document.getElementById('nextStatement').checked = !!block.nextConnection;
  }
}

function setOutput() {
  try {
    block.setOutput(document.getElementById('output').checked);
  } finally {
    document.getElementById('output').checked = !!block.outputConnection;
  }
}

function setCollapsed() {
  block.setCollapsed(document.getElementById('collapsed').checked);
}

function setInputsInline() {
  block.setInputsInline(document.getElementById('inputsInline').checked);
}

function addInput() {
  var type = parseInt(document.getElementById('inputType').value, 10);
  var label = document.getElementById('inputLabel').value;
  var name = document.getElementById('inputName').value;
  block.appendInput(label, type, name);
}

function removeInput() {
  var name = document.getElementById('removeInputName').value;
  block.removeInput(name);
}

function toXml() {
  var output = document.getElementById('importExport');
  var xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
  output.value = Blockly.Xml.domToText(xml);
  output.focus();
  output.select();
}

function fromXml() {
  var input = document.getElementById('importExport');
  var xml = Blockly.Xml.textToDom(input.value);
  Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml);
}

function toJavaScript() {
  var output = document.getElementById('importExport');
  output.value = Blockly.Generator.workspaceToCode('JavaScript');
}

function toDart() {
  var output = document.getElementById('importExport');
  output.value = Blockly.Generator.workspaceToCode('Dart');
}

function toPython() {
  var output = document.getElementById('importExport');
  output.value = Blockly.Generator.workspaceToCode('Python');
}

function airstrike(n) {
  var prototypes = [];
  for (var prototype in Blockly.Language) {
    if (Blockly.Language[prototype].category) {
      prototypes.push(prototype);
    }
  }
  for (var x = 0; x < n; x++) {
    var prototype = prototypes[Math.floor(Math.random() * prototypes.length)];
    var block = new Blockly.Block(Blockly.mainWorkspace, prototype);
    block.initSvg();
    block.getSvgRoot().setAttribute('transform', 'translate(' +
        Math.round(Math.random() * 450 + 40) + ', ' +
        Math.round(Math.random() * 600 + 40) + ')');
    block.render();
  }
}
</script>

<style>
body {
  background-color: white;
  font-family: sans-serif;
}
h1 {
  font-weight: normal;
  font-size: 140%;
}
#svg {
  float: right;
  height: 95%;
  width: 70%;
}
.blocklySvg {
  border: 1px solid black;
}
</style>
</head>
<body onload="start()">

<div id="svg"></div>

<h1>Blocky Playground</h1>

<p><a href="javascript:void(document.getElementById('svg').style.display = 'block')">Show</a> - <a href="javascript:void(document.getElementById('svg').style.display = 'none')">Hide</a></p>

<script type="text/javascript">
  if (rtl) {
    document.write('[ &larr; RTL. Switch to <A HREF="?ltr">LTR</A>. ]');
  } else {
    document.write('[ &rarr; LTR. Switch to <A HREF="?rtl">RTL</A>. ]');
  }
</script>

<p>
  <input type="button" value="Export to XML" onclick="toXml()">
  &nbsp;
  <input type="button" value="Import from XML" onclick="fromXml()">
  <br>
  <input type="button" value="Generate JavaScript" onclick="toJavaScript()">
  &nbsp;
  <input type="button" value="Generate Dart" onclick="toDart()">
  &nbsp;
  <input type="button" value="Generate Python" onclick="toPython()">
  <br>
  <textarea id="importExport" style="width: 26%; height: 12em"></textarea>
</p>
<hr>

<form id="blockFactoryForm" onsubmit="return false;">

<table>
  <thead>
    <tr>
      <td colspan=2>Stress the renderer with a
        <input type="button" onclick="createCustomBlock()" value="Custom Block">
      </td>
    </tr>
  </thead>
  <tbody id="customTbody" style="display: none">
    <tr>
      <td>Colour:</td>
      <td>
        <input type="number" min="0" max="360" style="width: 4em" id="colour" value="0" onchange="setColour()"> (0 - 360)
      </td>
    </tr>
    <tr>
      <td>New title:</td>
      <td><select id="titleType"><option value="label">Label</option><option value="textInput">Text Input</option></select> with text <input type="text" id="titleLabel">
      <input type="button" onclick="appendTitle()" value="Add"></td>
    </tr>
    <tr>
      <td>Tooltip:</td>
      <td><textarea id="tooltip" onchange="setTooltip()" onkeyup="setTooltip()"></textarea>
    </tr>
    <tr>
      <td>Previous statement:</td>
      <td><input type="checkbox" id="previousStatement" onchange="setPreviousStatement()"></td>
    </tr>
    <tr>
      <td>Next statement:</td>
      <td><input type="checkbox" id="nextStatement" onchange="setNextStatement()"></td>
    </tr>
    <tr>
      <td>Output:</td>
      <td><input type="checkbox" id="output" onchange="setOutput()"></td>
    </tr>
    <tr>
      <td>Collapsed:</td>
      <td><input type="checkbox" id="collapsed" onchange="setCollapsed()"></td>
    </tr>
    <tr>
      <td>Inline inputs:</td>
      <td><input type="checkbox" id="inputsInline" onchange="setInputsInline()"></td>
    </tr>
    <tr>
      <td>Append input:</td>
      <td><select id="inputType"><option value=1>Value</option><option value=3>Statement</option><option value=5>Variable</option></select> labled <input type="text" size=10 id="inputLabel"> with ID <input type="text" size=10 id="inputName">
      <input type="button" onclick="addInput()" value="Add"></td>
    </tr>
    <tr>
      <td>Remove input:</td>
      <td>ID <input id="removeInputName">
      <input type="button" onclick="removeInput()" value="Remove"></td>
    </tr>
  </tbody>
</table>
<hr>

<p>
  Stress test with an <input type="button" value="Airstrike!" onclick="airstrike(100)">
</p>

</form>

</body>
</html>
